<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <!-- <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/> -->
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="./css/style_login.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../script/jquery.min_login.js"></script>


    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />

    <style>
    .aui-code-box {
        padding: 10px 0;
        text-align: center;
    }
    body{
        background-color: white;
    }



    .aui-code-box p {
        color: #cccccc;
        font-size: 0.85rem;
        position: relative;
        width: 100%;
        background: #fff;
        padding: 0 20px;
        margin-top: 20px;
    }
    .aui-code-line {
        position: relative;
    }
    .aui-code-line:after {
        content: '';
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 20px;
        width: 90%;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    .aui-code-line-input {
        padding: 10px 0;
        height: 50px;
        width: 100%;
        font-size: 14px;
        background: none;
        border: none;
        color: #333;
    }
    .operate-eye-open {
        background-size: 20px;
        background-image: url('');
    }

    .operate-eye-close {
        background-size: 20px;
        background-image: url('');
    }
    .aui-show-eye {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        top: 9px;
        background-repeat: no-repeat;
        background-position: center;
    }

    </style>


</head>
<script type="text/javascript" src="../../script/api.js"></script>

<script>
    var phoneNumber = "";
    var baseURL='http://1.82.238.228/';
    function getVerifyCode(){

        var phone = $api.val($api.byId('phone'));




        var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/;

          if (!phoneReg.test(phone)) {

              api.toast({
        　　　　　　msg:'请输入正确的手机号码',
        　　　　　　duration: '1300',
        　　　　　　localtion: 'middle'
      　　　　 });

              return ;

          }

            phoneNumber = phone;
  //
  //         api.toast({
  //   　　　　　　msg:'验证码获取成功',
  //   　　　　　　duration: '1300',
  //   　　　　　　localtion: 'middle'
  // 　　　　 });
            api.ajax({
              url: baseURL+'api/login/sendIDCode/',
              method: 'post',
                headers: {
                'Content-Type': 'application/json;charset=utf-8'
             },
              data: {
                //   values: {"phone_number": "1111"}
                  body:{phone_number: phone}
              }

          }, function(ret, err) {

        //       if (err) {
        //           api.toast({
        //     　　　　　　msg:'网络异常，请稍后重试',
        //     　　　　　　duration: '1300',
        //     　　　　　　localtion: 'middle'
        //   　　　　 });
        //           return;
        //       }


              if (ret) {
                  if(ret.status==200){
                      if(!ret.status.data){
                          api.toast({
                    　　　　　　msg:'获取验证码成功',
                    　　　　　　duration: '1300',
                    　　　　　　localtion: 'middle'
                  　　　　 });
                          return;
                      }else{
                          api.toast({
                    　　　　　　msg:'获取验证码失败',
                    　　　　　　duration: '1300',
                    　　　　　　localtion: 'middle'
                  　　　　 });
                          return;
                      }
                  }
                  api.alert({ msg: JSON.stringify(ret) });
              } else {
                  api.alert({ msg: JSON.stringify(err) });
              }
          });

          return;



    }

    function register(){
        var username = $api.trim($api.val($api.byId('username')));
        var password = $api.val($api.byId('password'));
        var verifyCode = $api.val($api.byId('verifyCode'));
        if (!username) {
            api.toast({
                msg: '请输入账号',
                duration: 1000,
                location: 'middle'
            });
            return;
        }else if(username.length<6||username.length>20) {
            api.toast({
                msg: '用户名长度在6位到20位之间',
                duration: 1000,
                location: 'middle'
            });
            return;
        }else{
            var patt = /^[a-zA_Z][a-zA-Z0-9_]{4,19}$/;
            if(!patt.test(username)){
                api.toast({
                    msg: '首尾为字母，只含有英文和数字',
                    duration: 1000,
                    location: 'middle'
                });
                return;
            }
        }


        if (!password) {
            api.toast({
                msg: '请输入密码',
                duration: 1000,
                location: 'middle'
            });
            return;
        }else if(password.length<6||password.length>20) {
            api.toast({
                msg: '密码长度在6位到20位之间',
                duration: 1000,
                location: 'middle'
            });
            return;
        }else{
            var patt = /[a-zA-Z0-9_]{6,19}$/;
            if(!patt.test(password)){
                api.toast({
                    msg: '含有非法字符',
                    duration: 1000,
                    location: 'middle'
                });
                return;
            }
        }

        if(!verifyCode){
            api.toast({
                msg: '请输入验证码',
                duration: 1000,
                location: 'middle'
            });
            return;

        }else if (verifyCode.length!=4) {
            api.toast({
                msg: '请输入6位验证码',
                duration: 1000,
                location: 'middle'
            });
            return;
        }


        /*** 加载动画 ***/
        api.showProgress({
            title : ' ',
            text : '玩命加载中...',
            modal : true
        });


        api.ajax({
                url: baseURL+'/api/login/register/',
                timeout: 10,
                dataType: 'json',
                data:{
                    body:{
                        "phone_number": phoneNumber,
                        "password": password,
                        "nick_name": username,
                        "IDCode": 6575,
                    }
                },   //以表单方式提交参数（JSON对象）
                method: 'post'
        }, function(ret, err) {
            api.hideProgress();
            /*** 注册异常 ***/
            if (err) {
                api.toast({
          　　　　　　msg:'网络异常，请稍后重试',
          　　　　　　duration: '1300',
          　　　　　　localtion: 'middle'
        　　　　 });
                return;
            }

            if(ret.status!=200){
                api.toast({
                　　msg: '注册失败',
                　　duration: 1000,
                　　location: 'middle'
          　　　});
              return;

     　　　　 }else{

                 if(ret.status==200){
                     if (ret.data.user_id) $api.setStorage('user_id', ret.data.user_id);
                     if (ret.data.user_cookie) $api.setStorage('user_cookie', ret.data.user_cookie);
                        alert(JSON.stringify(ret.data))
                     api.toast({
             　　　　　　msg:'注册成功',
             　　　　　　duration: '1200',
             　　　　　　localtion: 'middle'
           　　　　　　});

                    setTimeout(function() {
                       api.openWin({
                   　　　　name: 'login',
                  　　　　 url: './login.html',
                   　　　　bounces: false,
                  　　　　 animation:{
                       　　　　type: "push",
                       　　　　duration:300
                   　　　　}
               　　　　});
                     }, 1000);

                     return;
                 }


                    // $api.setStorage('isLogin', true);
                    // api.sendEvent({
                    //     name: 'UserHasLogin'
                    // });
            }

        });

    }

    function tiaokuan(){
        api.openWin({
        　　　　name: 'index',
        　　　　 url: 'https://passport.baidu.com/static/passpc-account/html/protocal.html',
        　　　　bounces: false,
        　　　　 animation:{
        　　　　type: "push",
        　　　　duration:300
        　　　　}
        　　　　});
    }

</script>




<body>

    <header class="aui-navBar aui-navBar-fixed">
        <!-- 左上边的返回按钮 -->
        <a href="javascript:{api.closeWin()}" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>

        <div class="aui-center">
            <span class="aui-center-title">注册</span>
        </div>
    </header>


    <div class="aui-code-box">

        <p class="aui-code-line">
            <input type="text" class="aui-code-line-input" name="userName" value="" id="username" autocomplete="off" placeholder="请输入账户名"/>
        </p>
        <p class="aui-code-line aui-code-line-clear">
            <i class="aui-show  operate-eye-open"></i>
            <input type="password"  name="userPassword"  id="password" class="aui-code-line-input password" placeholder="请输入密码" value="">
        </p>

        <p class="aui-code-line ">
            <input type="number"  name="phone"  id="phone" class="aui-code-line-input " placeholder="请输入手机号" value="">
            <span style="position: absolute; top:20%; right:30px; color:blue;" onclick="getVerifyCode()" > 获取验证码 </span>
        </p>

        <p class="aui-code-line ">
            <input type="number"  name="verifyCode"  id="verifyCode" class="" placeholder="请输入验证码" value=""  >
        </p>



        <div style="padding-top: 40px;">
            <input class="aui-checkbox" type="checkbox" name="demo1" checked=""> 同意 <a onclick="tiaokuan()">用户条款 </a>
        </div>
        <div class="aui-btn-sm aui-btn-info " onclick="register()" style="margin: 20px; padding: 10px; border-radius: 20px;">   注册  </div>

    </div>


</body>

</html>
